<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>订单详情</title>
  <link rel="stylesheet" href="mobile/layui/css/layui.mobile.css">
  <link rel="stylesheet" href="mobile/layui/css/layui.css">
  <link rel="stylesheet" href="mobile/css/yj_css.css">
  <link rel="stylesheet" href="mobile/layer/mobile/need/layer.css">
</head>
<body>
  <header class="yj-header">
    <a href="javascript:history.go(-1)" class="yj-header-return layui-icon">&#xe603;</a>
    <span>订单详情</span>
    <a class="yj-header-meau"></a>
  </header>
  <div class="yj-content">
    <div class="yj-bg-gradient yj-order-header yj-colorfff">
      订单状态：<span id="orderState">已租</span>
    </div>
    <div class="yj-mar-t yj-pad-t">
      <!-- 收货地址 -->
      <div class="yj-bgfff yj-address-list yj-pad-tb-big">
        <span class="yj-address-icon"><img src="mobile/images/local.png" alt=""></span>
        <div class="yj-address-main yj-pad-r">
          <p>租客:<span id="userInfoName">小修西</span><span class="yj-right" id="userInfoPhone">15888886666</span></p>
        </div>
      </div>
    </div>
    
    <!-- 商品基本信息 -->
    <div class="yj-order-basicinfo yj-padding-big">
      <span class="yj-goods-thumbnail"><img src="mobile/images/tu2.jpg" id="carPakImg"></span>
      <div class="yj-confirm-goods-textinfo" style="color:#44576b;">
        <div class="yj-goods-price yj-clearfix" style="color:#44576b">
          <p class="yj-elip-2">结束时间:<span id="startTime"></span></p>
        </div>
        <div class="yj-goods-price yj-clearfix" style="color:#44576b">
          <p class="yj-elip-2">结束时间:<span id="endTime"></span></p>
        </div>

        <div class="yj-goods-price yj-clearfix">
          代金卷：<span id="voucherMoney">688.00</span>
        </div>
        <p class="yj-color-gray">出租人电话：<span id="rentPhone">17775514495</span></p>
      </div>
    </div>
    <div class="yj-bgfff">
      <div class="yj-order-orderinfo yj-color-gray yj-padding-big">
        <p>支付方式<span class="yj-right">支付宝支付</span></p>

      </div>
      <p class="yj-list-item yj-border-t yj-pad-lr yj-order-orderinfo-countprice">总计<span class="yj-color-red yj-right">&yen;<span id="money">2000.00</span></span></p>
    </div>

    <!-- 收货地址 -->
    <div class="yj-address-list yj-bgfff yj-mar-t yj-pad-tb-big">
      <span class="yj-address-icon"><img src="mobile/images/shop.png" alt=""></span>
      <div class="yj-address-main yj-pad-r yj-border-r">
        <p class="yj-mar-t">车位地址:<span id="cAddress">河南沙僧郑州市金水区文化路82号硅谷广场703</span></p>
      </div>
      <a class="yj-address-more"><img src="mobile/images/local2.png" style="height: 1.5em;"></a>
    </div>

    <div class="yj-order-orderinfo yj-order-time yj-color-gray yj-mar-t yj-padding-big yj-bgfff">
      <p>订单编号：<span id="orderFormNum">66685456558652</span></p>
      <p>车位编号：<span id="carparkNum"></span>66685456558652</p>
      <p>支付时间：<span id="payTime">2018-02-06 18:00:59</span></p>
    </div>
    <div class="yj-footer yj-order-footer">
      <p class="yj-bgfff yj-text-right yj-pad-lr">

        <button class="yj-btn yj-btn-sm yj-btn-line-main yj-mar-l" onclick="addComplaint()">投诉</button>
      </p>
    </div>
  </div>

  <!--弹出框-->
  <div id="addComplaintDiv" title="投诉" style="display: none;padding: 40px 40px;">
    <form action="complaint/addComplaint" id="addForm" enctype="multipart/form-data" method="post">
      <table>
        <tr>
          <td>投诉理由:</td>
          <td>
            <textarea id="complaintReason" name="coReason" style="width: 100px;height: 60px"></textarea>
          </td>
        </tr>
        <tr><td><input type="hidden" id="orderId" name="oId"></td></tr>
      </table>
    </form>
  </div>
  <button data-method="confirmTrans" class="layui-btn">配置一个透明的询问框</button>
  <script th:src="@{/mobile/js/jquery.min.js}"></script>
  <script th:src="@{/mobile/layui/layui.js}"></script>
  <script src="mobile/js/jquery.min.js"></script>
  <script src="mobile/js/yj_js.js"></script>
  <script src="mobile/layer/layer.js"></script>
  <script src="mobile/js/jQuery.form.js"></script>
<script th:inline="javascript">
    var url = [[@{/}]];
      layui.use("layer", function () {
        var layer = layui.layer;

        var active ={
          setTop:function () {
            var that = this;
            layer.open({
              confirmTrans: function(){
                //配置一个透明的询问框
                layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                  time: 20000, //20s后自动关闭
                  btn: ['明白了', '知道了', '哦']
                });
              }
            })
          }
      }
      })
</script>
<script>
  function addComplaint() {
    var id = getQueryVariable("id");
    location.href="opinion.html?id="+id;
/*    var index =layer.open({
      title: ['投诉', 'font-size:18px;text-align:center;'],
      type: 1,
      area: ['400px', '270px'], //宽高
      //弹出对应id的html页面addScheduleDiv
      content: $('#addComplaintDiv'),
      shade:0,
      zIndex:3,
      btn: ["确认", "取消"],
      //点击确认执行的方法
      yes: function (index, layero) {
        //要提交的ajax
        var option = {
          url : url+'complaint/addComplaint',
          type : 'POST',
          dataType : 'json',
          //headers : {"ClientCallMode" : "ajax"}, //添加请求头部
           success : function(data) {
            var msig="";
            if(data.msg =="添加投诉成功"){
              msg="您的投诉已提交！";
            }else{
              msg="提交投诉失败！";
            }
            layer.msg(msg);
            //清空输入框
            $("#complaintReason").val("");
            $("#cId").val("");
            //关闭弹出层
            layer.close(index);
          }
        };
        //提交
        $("#addForm").ajaxSubmit(option);
          setTimeout(function(){
              window.location.reload();
          },2000);
      }
    });*/
  }
</script>
<script>

  function getQueryVariable(variable)
  {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }

  $(function () {
    var id = getQueryVariable("id");

    $.ajax({
      url:url+"orderForm/findOrderById",
      data:{
        id:id
      },
      success:function (result) {
        var result = result.result;
        $("#orderState").html(result.orderForm.oStatus);
        $("#userInfoName").html(result.userInfo.uName);
        $("#userInfoPhone").html(result.userInfo.uTel);
        $("#carPakImg").attr("src",result.carpark.cPic);

        if(result.orderForm.voucher == null){
          $("#voucherMoney").html("未使用");
      } else{
          $("#voucherMoney").html("¥&nbsp;"+result.orderForm.voucher.vSum);
        }
        $("#rentPhone").html(result.carpark.userInfo.uTel);
        $("#money").html(result.orderForm.oTotalmoney);
        $("#cAddress").html(result.carpark.cAddress);
        $("#orderFormNum").html(result.orderForm.oNumber);
        $("#carparkNum").html(result.carpark.cNumber);
        $("#payTime").html(result.orderForm.oTime);
        $("#startTime").html(result.orderForm.oTime);
        $("#endTime").html(result.orderForm.oEndtime)
      }
    })
  })

  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
</script>
</body>

</html>